<template>
    <div class="home-contanier fullscreen" id="fullscreen"  ref="fullscreen">
        <!-- <el-button type="primary" @click="fullScreen()">全屏</el-button> -->
        <!-- 上部 -->

        <div class="topFour">
            <div class="leftTwo">

                <div class="topLayout">
                    <div class="leftTimer">
                        <div style="font-size: 18px;font-weight: bold;">
                            全国数据监控
                        </div>
                        <!-- 封装 实时显示时间 组件 -->
                        <el-icon color="#72A9E3" style="
                                                vertical-align:middle">
                            <Clock />
                        </el-icon>
                        <TimeModal />
                    </div>
                    <div class="rightLayout">
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    <el-icon>
                                        <Coin />
                                    </el-icon>
                                    <div class="infoNumber">
                                        <span style="color: #73AAE5;">总销售额</span>
                                        <span style="font-size: 15px;">6521324万元</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    <el-icon>
                                        <Memo />
                                    </el-icon>
                                    <div class="infoNumber">
                                        <span style="color: #73AAE5;">总订单量</span>
                                        <span style="font-size: 15px;">21324单</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    <div class="infoNumber">
                                        <span style="color: #73AAE5;">独立用户数</span>
                                        <span style="font-size: 15px;">68576位</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content ep-bg-purple">
                                    <el-icon>
                                        <ShoppingCart />
                                    </el-icon>
                                    <div class="infoNumber">
                                        <span style="color: #73AAE5;margin-right: 20px;">总销售额</span>
                                        <span style="font-size: 15px;">958万个</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <!-- 地图 折线图 柱状图 -->
                <div class="bottomMap">
                    <!-- 地图 -->
                    <div class="ChineseMap">
                        <ChineseMap />
                    </div>

                    <div class="rightCharts">
                        <!-- 折线图 -->
                        <div class="topChartOne">
                            <LeftChartOne />
                        </div>
                        <!-- 柱状图 -->
                        <div class="bottomChartTwo">
                            <LeftChartTwo />
                        </div>
                    </div>

                    <div class="tableInfoOne">
                        <div class="imgBgiLeft">
                            <img src="https://sugar.aipage.com/static/img-templet/pic-143-1471b2dcc36fdc59.png" alt="">
                        </div>
                        <div class="saleInscrease">
                            <p>销售额同比增长</p>
                            <p>
                                <span class="spanOne">+</span>
                                <span class="spanTwo">35</span>%
                            </p>
                        </div>

                    </div>

                    <div class="tableInfoTwo">
                        <div><span>东北部：</span><span style="color: #409FE0;font-size: 18px;">521324 </span>万元</div>
                        <div style="padding:8px 0"><span>西北部：</span><span style="color: #409FE0;font-size: 18px;">98123 </span>万元</div>
                        <div><span>中南部：</span><span style="color: #409FE0;font-size: 18px;">1098734 </span>万元</div>
                    </div>
                </div>

            </div>

            <!-- 上右部 上、下两个图表-->
            <div class="rightTwo">

            </div>
        </div>




        <!-- 下部
        <div class="bottomTwo">
            <div class="leftLayoutFour"></div>
            <div class="rightTable"></div>
        </div> -->




    </div>
</template>

<script setup lang="ts">
import './homeStyle.scss'
import TimeModal from './Components/TimeModal.vue'
import ChineseMap from './Components/ChineseMap.vue';
import LeftChartOne from './Components/LeftChartOne.vue'
import LeftChartTwo from './Components/LeftChartTwo.vue'

const fullScreen = () => {
    //全屏
    var full = document.getElementById('fullscreen')
    launchIntoFullscreen(full)
}
//全屏封装
const launchIntoFullscreen = (element: any) => {
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    }
}

</script>

<style scoped lang="scss"></style>